<template>
  <div class="publictop">
    <!-- 顶部登录注册 -->
    <div class="common_top">
      <div class="top_m">
        <div class="top_mr">
          <a href="">
            <span class="iconfont">&#xe8c5;</span>
            会员俱乐部
          </a>
          <router-link to="/order">我的订单</router-link>
          <a href="">营业网点</a>
          <a href="">招募合伙人</a>
          <a href="">服务中心</a>
        </div>
        <!-- phone为空 -->
        <div class="top_ml" v-if="!phone">
          <router-link to="/reg/denglu">
            <i class="el-icon-user"></i>
            登录 </router-link
          >|
          <router-link to="/reg">
            <i class="el-icon-edit-outline"></i>
            注册
          </router-link>
        </div>
        <!-- phone不为空 -->
        <div
          class="top_ml"
          style="font-size: 12px; padding: 0 7px"
          v-if="phone"
        >
          <i class="el-icon-user"></i>
          HI {{ phone }}
          |

          <!-- <i class="el-icon-edit-outline"></i> -->
          <button @click="open">退出</button>
        </div>
      </div>
    </div>
    <!-- 中间搜索框区域 -->
    <div class="common_head">
      <!-- 右侧电话 -->
      <div class="phone_r">
        <h2>
          <i class="el-icon-phone-outline"></i>
          1010-9898
        </h2>
        <h3>09:00~22:00</h3>
      </div>
      <!-- LOGO -->
      <a href="">
        <img src="../assets/logo.png" class="logo" />
      </a>
      <!-- 城市选择 -->
      <div class="address">
        <i class="el-icon-location-outline"></i>
        <span>成都</span>
        <i class="el-icon-arrow-down"></i>
      </div>
      <!-- 搜索框 -->
      <div class="search">
        <div class="search_bot">
          <i class="el-icon-search"></i>
        </div>
        <input type="text" class="search_input" placeholder="国内游" />
      </div>
      <!--高级搜索 -->
      <div class="gaosearch">
        <span>高级搜索</span>
        <i class="el-icon-caret-bottom"></i>
      </div>
    </div>
    <div class="common_nav">
      <el-menu
        width="1142px"
        default-active="1"
        class="el-menu-demo"
        text-color="#000"
        active-text-color="#cc6633"
        mode="horizontal"
        @select="handleSelect"
      >
        <el-menu-item index="1" @click="$router.push('/index/indexmain')">
          首页
        </el-menu-item>
        <el-menu-item index="2">出境游</el-menu-item>
        <el-menu-item index="3" @click="$router.push('/guonei')"
          >国内游</el-menu-item
        >
        <el-menu-item index="4" @click="$router.push('/dzy')"
          >定制旅行
        </el-menu-item>
        <el-submenu index="5">
          <template slot="title">会员俱乐部会</template>
          <el-menu-item index="5-1">积分商城</el-menu-item>
          <el-menu-item index="5-2">会员活动</el-menu-item>
        </el-submenu>
        <el-submenu index="6">
          <template slot="title">大客户专区</template>
          <el-menu-item index="6-1">中信银行贵宾</el-menu-item>
          <el-menu-item index="6-2">民生银行贵宾</el-menu-item>
        </el-submenu>
        <el-menu-item index="7" @click="$router.push('/borui')"
          >众信博睿</el-menu-item
        >
        <el-menu-item index="8">全球景点攻略</el-menu-item>
        <el-menu-item index="9" @click="$router.push('/aboutus')"
          >众信动态</el-menu-item
        >
      </el-menu>
    </div>
  </div>
</template>

<script>
import { mapMutations, mapState } from "vuex";
export default {
  // import { mapMutations, mapState } from "vuex";
  computed: {
    ...mapState(["phone"]),
  },
  methods: {
    ...mapMutations(["logout"]),

    open() {
      this.$confirm("此操作将退出登录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "退出成功!",
          });
          this.logout(null);
          this.$router.replace("/");
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消退出",
          });
        });
    },
  },
};
</script>
<style lang="scss" scoped src="../assets/scss/IndexHeader.scss"></style>
